<{include file='top.html'}>
<style>
    .item{
        position: absolute;
        width: 9rem;
        height:6rem;
        line-height:6rem;
        text-align: center;
        background-color:#fff4a9 ;
        border:1px solid #8a0000;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border-radius:5px;
        overflow: hidden;
    }
    .item img{
        width: 98%;
        height:98%;
        padding:2%;
    }

    #item_0{
        left:7%;
        top:3rem;
    }
    #item_1{
        left:37%;
        top:3rem;
    }
    #item_2{
        left:67%;
        top:3rem;
    }

    #item_3{
        left:67%;
        top:11.5rem;

    }
    #item_4{
        left:67%;
        top:20.5rem;
    }

    #item_5{
        left:37%;
        top:20.5rem;
    }
    #item_6{
        left:7%;
        top:20.5rem;
    }
    #item_7{
        left:7%;
        top:11.5rem;
    }

    .active{
        outline: 2px solid gold;
    }
    .grid{
        width: 34rem;
        height: 30rem;
        margin: auto;
        margin-top: 4.5rem;
        background: url(/Public/Wap/turn/grid.jpg) no-repeat;
        position: relative;
    }
</style>
</head>
<body style="background-color: white;">
<div class="turnplateBg" style="background: url(/Public/Wap/turn/pannel.jpg) no-repeat;background-size:cover ;background-position:center center;width: 100%;height:66%;box-sizing: border-box;">
    <div class="grid" id="grid" style="background-size: cover;">
    <{foreach from=$prizes key=key item=item}>
        <div id="item_<{$key}>" data-id="<{$item.id}>" data-name="<{$item.prizeName}>" class="item">
            <{if $item.prizePic}>
                <img src="<{$item.prizePic}>" alt="<{$item.prizeName}>" />
            <{else}>
                <{$item.prizeName}>
            <{/if}>
        </div>
    <{/foreach}>
    </div>


    <a id="tupBtn" class="turnplatw_btn" style="background-image: url(/Public/Wap/turn/btn.png);width: 12rem;margin-left:-6rem;border-radius:initial;height:4.5rem;margin-top: 2rem;top: initial;"></a>

<a href="javascript:void(0)" onclick="showRule()" style="position: absolute; margin-top: 19%; left: 43%;text-decoration: underline;">活动说明</a>

    <div  style="display:block;width:90%;margin:1rem auto;height:10em;position: fixed;;left: 50%;margin-left:-45%;
    background-image: url(/Public/Wap/turn/log.png);-webkit-background-size: cover;background-size: contain;background-repeat: no-repeat;bottom: 0;">
       <div style="margin-top:4em;text-align: center;font-size: 1.3rem;" id="log">
        <{$log|default:'还没有您的抽奖记录'}>
       </div>
    </div>
</div>


<!--活动规则弹出框-->
<div class="popup InstructionsBox">
    <h3>使用说明</h3>
    <table class="InstructionsCon">
        <{if $info.rule}>
        <{foreach from=$info.rule item=item}>
        <tr>
            <td><{$item}></td>
        </tr>
        <{/foreach}>
        <{/if}>
    </table>
</div>

<!--抽取实物地址验证-->
<div class="Zpcfrm" id="checkAddress" style="display: none;">
    <div class="Zpcfrm_p">
        <p class="Zpcfrm_p_tit" id="title">确认地址</p>
        <p class="Zpcfrm_p_cont" id="content">您尚未完善收货地址信息<br>这将导致您无法正常收货</p>
    </div>
    <div class="Zpcfrm_sub">
        <!--<span class="Zpcfrm_sub_cel"><a href="javascript:void(0)">取消</a></span>-->
        <span class="Zpcfrm_sub_sure"><a href="<{U('User/info')}>">去完善地址</a></span>
    </div>
</div>
<{include file="signBody.html"}>
</body>
</html>
<script type="text/javascript" src="<{$preStaticUrl}>Wap/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    var lottery={
        index:-1,    //当前转动到哪个位置，起点位置
        count:0,    //总共有多少个位置
        timer:0,    //setTimeout的ID，用clearTimeout清除
        speed:20,    //初始转动速度
        times:0,    //转动次数
        cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize:-1,    //中奖位置
        init:function(id){
            if ($("#"+id).find(".item").length>0) {
                $lottery = $("#"+id);
                $units = $lottery.find(".item");
                this.obj = $lottery;
                this.count = $units.length;
                $lottery.find("#item_"+this.index).addClass("active");
            };
        },
        roll:function(){
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find("#item_"+index).removeClass("active");
            index += 1;
            if (index>count-1) {
                index = 0;
            };
            $(lottery).find("#item_"+index).addClass("active");
            this.index=index;
            return false;
        },
        stop:function(index){
            this.prize=index;
            return false;
        }
    };

    function roll(){
        lottery.times += 1;
        lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
        if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
            clearTimeout(lottery.timer);
            lottery.prize=-1;
            lottery.times=0;
            click=false;
            layer.msg(got);
            $('#log').html(got);
        }else{
            if (lottery.times<lottery.cycle) {
                lottery.speed -= 10;
            }else if(lottery.times==lottery.cycle) {
                //var index = Math.random()*(lottery.count)|0;
                //lottery.prize = index;
            }else{
                if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                    lottery.speed += 110;
                }else{
                    lottery.speed += 20;
                }
            }
            if (lottery.speed<40) {
                lottery.speed=40;
            };
            //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
            lottery.timer = setTimeout(roll,lottery.speed);//循环调用
        }
        return false;
    }

    function showRule(){
        //边缘弹出
        layer.open({
            type: 1,
            closeBtn: 0, //不显示关闭按钮
            title:'活动说明',
            anim: 2,
            area: ['70%', 'auto'],
            shadeClose: true, //开启遮罩关闭
            content: '<div style="padding: 0.4em;"><{$rule}></div>'
        });

    }





    function openPrize(){
        click=true;
        $.get('<{u("open?mid="|cat:$mid)}>',function(res){
            console.log(res)
            if(res.status!=0){
                layer.msg(res.msg);
                return false;
            }

            got=res.msg;
            $('#grid .item').each(function(i,obj){
                if($(obj).attr('data-id')==res.prizeId){
                    lottery.prize=i;
                    lottery.speed=20;
                    roll();    //转圈过程不响应click事件，会将click置为false
                    click=false; //一次抽奖完成后，设置click为true，可继续抽奖
                    return false;
                }
            })
        },'json');
    }



    var click=false;
    var got="";

    window.onload=function(){



        lottery.init('grid');
        $("#tupBtn").click(function(){

            <{if $jump }>
                layer.confirm('您还未录入生日信息，请前往录入？', {
                    btn: ['确定'] //按钮
                }, function(){
                    location.href="<{U('tmp/index')}>";
                        return;
                });

            <{else if $fail}> layer.msg("<{$fail}>");return false;<{/if}>
            <{if $pointLack eq 1}> layer.msg("您的积分不足<{$pointFee}>,不能参与本次抽奖");return false;<{/if}>

            if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
                return false;
            }else{
                <{if $pointFee gt 0}>
                    //询问框
                    layer.confirm("本次抽奖需要消耗<{$pointFee}>积分,确定参加吗？", {
                        btn: ['确定','取消'] //按钮
                    }, function(){
                        layer.closeAll();
                        openPrize();
                    }, function(){

                    });
                    return;
                <{/if}>

                openPrize();



            }
        });
    };
</script>